<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ShowOrder</title>
    <link rel="StyleSheet" href="../css/account.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div th:replace="/common/top"></div>
<div id="w">
    <div id="petName">Order Information</div>
    <div id="orderContent">
        <div id="itemInfoContent">
            <table id="ItemOrderTable">
                <tr>
                    <th colspan="3">Goods Information</th>
                </tr>
                <tr>
                    <td class="itemOrderTableTitle">Item Id</td>
                    <td class="itemOrderTableTitle">Quantity</td>
                    <td class="itemOrderTableTitle">Total Price</td>
                </tr>
                <tr th:each="item:${lineItems}">
                    <td class="itemOrderTableInfo">
                        <span class="itemInfo" th:text="${item.itemid}" name="itemid">ItemId</span>
                    </td>
                    <td class="itemOrderTableInfo">
                        <span class="itemInfo" th:text="${item.quantity}" name="quantity">x2</span>
                    </td>
                    <td class="itemOrderTableInfo">
                        <span class="itemInfo" th:text="'$'+ ${item.unitprice * item.quantity}" name="totalprice">总价</span>
                    </td>
                </tr>
            </table>
            
        </div>
        
        <div id="accountInfoContent">
            <table id="accountOrderTable">
                <tr>
                    <th colspan="2">address Information</th>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">收件人：</td>
                    <td class="accountOrderTableInfo" th:text="${order.username !=null ? order.username : ''}" name="username">xxx</td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">First name:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.billtofirstname !=null ? order.billtofirstname : ''}" type="text" name="billtofirstname" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Last name:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.billtolastname !=null ? order.billtolastname : ''}" type="text" name="billtolastname" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Address 1:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.billaddr1 !=null ? order.billaddr1 : ''}" type="text" name="billaddr1"readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Address 2:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.billaddr2 !=null ? order.billaddr2 : ''}" type="text" name="billaddr2"readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">City:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.billcity !=null ? order.billcity : ''}" type="text" name="billcity" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">State:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.billstate !=null ? order.billstate : ''}" type="text" name="billstate"readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Zip:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.billzip !=null ? order.billzip : ''}" type="text" name="billzip" readonly/>
                    </td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitles">Country:</td>
                    <td class="accountOrderTableInfos"><input th:value="${order.shipcountry !=null ? order.shipcountry : ''}" type="text" name="shipcountry" readonly/></td>
                </tr>
                <tr>
                    <th colspan="2" id="shipAdd">Shipping Address</th>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">First name:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shiptofirstname !=null ? order.shiptofirstname : ''}" type="text" name="shiptofirstname" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Last name:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shiptolastname !=null ? order.shiptolastname : ''}" type="text" name="shiptolastname" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Address 1:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shipaddr1 !=null ? order.shipaddr1 : ''}" type="text" name="shipaddr1" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Address 2:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shipaddr2 !=null ? order.shipaddr2 : ''}" type="text" name="shipaddr2" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">City:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shipcity !=null ? order.shipcity : ''}" type="text" name="shipcity" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">State:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shipstate !=null ? order.shipstate : ''}" type="text" name="shipstate" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Zip:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shipzip !=null ? order.shipzip : ''}" type="text" name="shipzip" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">Country:</td>
                    <td class="accountOrderTableInfo"><input th:value="${order.shipcountry !=null ? order.shipcountry : ''}" type="text" name="shipcountry" readonly/></td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">订单编号：</td>
                    <td class="accountOrderTableInfo" th:text="${order.orderid}" name="orderid">xxx</td>
                </tr>
                <tr>
                    <td class="accountOrderTableTitle">合计:</td>
                    <td class="accountOrderTableInfo"><input id="total" th:value="'$' + ${order.totalprice}" name="totalprice" readonly="readonly"></td>
                </tr>
            </table>
        </div>

        </form>
    </div>
</div>
<div th:replace="/common/bottom"></div>
</body>
</html>
